<html>
    <head>
        <meta charset="utf-8">
        <title>汤姆猫</title>
        <style>
            /*去除页边距*/
            body{
                margin: 0;
            }
            /*总是铺满全屏*/
            img{
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <!--点击调用-->
    <body onclick="action(event)">
        <!--视频文件路径-->
        <img src="image/angry/angry_00.jpg"> 
        <!--音频文件路径-->
        <audio src=""></audio>
    </body>
    <script>
        var playing = false;
        function action(event){
            if(playing){
                return;
            }
            
            //alert(event.pageX+","+event.pageY);
            var x = event.pageX;
            var y = event.pageY;
            x = x/document.documentElement.clientWidth*320;
            y = y/document.documentElement.clientHeight*480;
            if (x >83&&x <109&&y >270&&y <308){
                play("cymbal",12,1);
            }
            if (x >205&&x <229&&y >259&&y <302){
                play("pie",23,12);
            }
            if (x >106&&x <210&&y >84&&y <118){
                play("eat",39,12);
            }
            if (x >110&&x <210&&y >328&&y <408){
                play("drink",80,35,"pour",14);
            }
            if (x >67&&x <93&&y >80&&y <138){
                play("angry",25,11)
            }
            if (x >218&&x <248&&y >356&&y <428){
                play("fart",27,9)
            }
            if (x >162&&x <204&&y >424&&y <457){
                play("foot_left",29,13)
            }
            if (x >112&&x <157&&y >423&&y <457){
                play("foot_right",29,11)
            }
            if (x >106&&x <223&&y >119&&y <224){
                play("knockout",80,7)
            }
            if (x >218&&x <251&&y >87&&y <141){
                play("scratch",55,9)
            }
            if (x >132&&x <190&&y >258&&y <321){
                play("stomach",33,8)
            }

            
            //play("eat",39,12);
            //play("pie",23,12);
            //play("cymbal",12,1);
            //play("drink",80,35,"pour",14);
        }
        
        function play(name,count,start,sound,start2){
            playing = true;
            var i = 0;
            var img = document.getElementsByTagName("img")[0];
            var audio = document.getElementsByTagName("audio")[0];
            
            function animate(){
               i++;
               var src = "image/"+name+"/"+name+"_"+(i <10?"0":"")+i+".jpg";
               img.src = src;
               if(i == start){
                   var asrc = "sounds/"+name+".m4a";
                   audio.src = asrc;
                   audio.play();
               }
               if(i == start2){
                   var asrc = "sounds/"+sound+".m4a";
                   audio.src = asrc;
                   audio.play();
               }
               if(i<count){
                   setTimeout(animate,100);
               }else{
                   playing = false;
               }
            }
            animate();
        }
        
        
    </script>
</html>